<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>各州检测合格率统计</title> 
    <link rel="shortcut icon" href="favicon.ico">
    <#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <link href="${WEB_PATH}/resources/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>
	    .widget.style1 h2 {
		    font-size: 40px;
		}
		.widget.style1 h3{
		    font-size: 24px;
		}
		.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
	</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">	
			<div class="col-lg-12">
			    <div class="ibox float-e-margins">
			        <div class="ibox-title">
			            <h5>各检测站车辆检测统计</h5>
			        </div>
			        <div class="ibox-content"> 
			        	<div style="" class="demo ui-sortable">
			        		<div class="row">
			        			<div class="col-sm-3">
	                                <div class="form-group">
	                                	<label>检测时间：</label>
		                                <div id="data">
		                                    <div class="input-daterange input-group" id="datepicker">
				                                <input type="text" class="input-sm form-control" name="start" id="start" value="" placeholder="选择查询时间"/>
				                            </div>
		                                </div>
	                                </div>
	                            </div>
	                            <div class="col-sm-2" style="padding-top: 22px;">
	                                 <button type="button" class="btn btn-primary" id="search">查询</button>
	                            </div> 
			        		</div>
                    	</div>
                    	  
                        <div class="row" style="margin-top:20px"> 
                            <div class="col-sm-12">
                               <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                               	<button type="button" class="btn btn-outline btn-default" id="excel" data-toggle="modal" id="printBg">
                                        <i class="iconfont" style="font-size:14px;font-style:normal;"></i>&nbsp;&nbsp;导出Excel
                                 </button>
                               </div>
                                <table id="exampleTableEvents" data-mobile-responsive="true" >
                                    <thead>
                                        <tr>
                                        	<th data-field="id" rowspan="2" data-valign="middle" data-align="center" data-formatter="indexFormatter">序号</th>
                                        	<th data-field="JYJGMC" rowspan="2" data-valign="middle" data-align="center">检测站名称</th>
							                <th data-field="dateStr" rowspan="2" data-valign="middle" data-align="center">年月</th>
							                <th colspan="3" data-align="center">检测车辆总数</th>
							                <th colspan="3" data-align="center">初检</th>
							                <th colspan="3" data-align="center">复检</th>
							            </tr>
							            <tr>
							                <th data-field="ZCZS" data-align="center" data-formatter="DataFormatter">检测数</th>
							                <th data-field="HHZS" data-align="center" data-formatter="DataFormatter">合格数</th>
							                <th data-field="price" data-align="center" data-formatter="ZSFormatter">合格率</th>
							                
							                <th data-field="CJS" data-align="center" data-formatter="DataFormatter">检测数</th>
							                <th data-field="CJHGS" data-align="center" data-formatter="DataFormatter">合格数</th>
							                <th data-field="price" data-align="center" data-formatter="CJFormatter">合格率</th>
							                
							                <th data-field="FJS" data-align="center" data-formatter="DataFormatter">检测数</th>
							                <th data-field="FJHGS" data-align="center" data-formatter="DataFormatter">合格数</th>
							                <th data-field="price" data-align="center" data-formatter="FJFormatter" >合格率</th>
							            </tr>
							            
                                    </thead>
                                </table>
                            </div>
                        </div>
			        </div>
			    </div>
			</div> 
	 	</div>
	</div>
</body>
<@import.tableManagerImportScript/>
<script src="${WEB_PATH}/resources/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="${WEB_PATH}/resources/js/plugins/switchery/switchery.js"></script>
<script src="${WEB_PATH}/resources/js/plugins/echarts/echarts-all.js"></script>
<script src="${WEB_PATH}/resources/js/city-picker.data.js"></script>
<script src="${WEB_PATH}/resources/js/city-picker.js"></script>

	<script >
		$("#data .input-daterange").datepicker({
	       format: 'yyyy-mm',  
           weekStart: 1,
           endDate : new Date(),
           autoclose: true,
           startView: 2,  
           maxViewMode: 1,
           minViewMode:1,
           forceParse: false,  
           language: 'zh-CN'
	    }); {
	        var i = document.querySelector(".js-switch"),
	        t = (new Switchery(i, {
	            color: "#1AB394"
	        }), document.querySelector(".js-switch_2")),
	        a = (new Switchery(t, {
	            color: "#ED5565"
	        }), document.querySelector(".js-switch_3"));
	        new Switchery(a, {
	            color: "#1AB394"
	        })
	    } 
	    $("#start").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(end == null || "" == end){
	    		$("#end").val(start);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#end").val(start);
	    		}
	    	}
	    });
	    $("#end").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(start == null || "" == start){
	    		$("#start").val(end);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#start").val(end);
	    		}
	    	}
	    }); 
    	$(function(){
    		$("#tsOrId").chosen({width:'100%'});
    		function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset, 
			        startTime:$("#start").val(),
			        maxrows:params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	var $tableData = $("#exampleTableEvents").bootstrapTable({
	            url: "${WEB_PATH }/report/center/getEveryStatistics.do",
	            method: 'get',
	            search:true,
	            pagination:false,
	            pageNumber:1,
	           // showExport: true,//显示导出按钮  
               // exportDataType: "basic",//导出类型    
	             
	            showRefresh:false, 
	            showColumns:false,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            toolbarAlign: 'right',//toolbar位置  
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            searchText:"",   //设置搜索框文本初始值
	            search: false,    //隐藏搜索框
	            minimumCountColumns: 1,  
	            showToggle:false, 
	            clickToSelect: true,  
	            icons: {
	                refresh: "glyphicon-repeat", 
	                columns: "glyphicon-list"
	            }
	        });
	        //$('.fixed-table-toolbar').remove();
	        
	       
	        
	        
	        $("#search").click(function(){
	        	$("#exampleTableEvents").bootstrapTable('refresh');
	        });
	        
	        $("#excel").on("click",function(){
	           var allTableData = $tableData.bootstrapTable('getData');//获取表格的所有内容行
	           	if(allTableData.length==0){
		           	layer.alert('<font color="red">没有数据可导出</font>', {
					  skin: 'layui-layer-molv' ,
					  closeBtn: 0,
					  icon: 5,
					});
	           	}else{
	           	    console.log(allTableData.length==0);
		        	var date = $("#start").val();
		        	location.href="${WEB_PATH}/report/center/exportExcelEverySta.do?date="+date;
	           	}
	        })
	        
        });
        
        function indexFormatter(value, row, index) {  
              return index+1;  
        }
        
        function ZSFormatter(value, row, index) { 
        	 if(row.HHZS==null||row.ZCZS==null||row.ZCZS==0){
         	 	return "-";
         	 } 
         	 return ((row.HHZS / row.ZCZS)*100).toFixed(1);
        }
        
         function CJFormatter(value, row, index) { 
             if(row.CJHGS==null||row.CJS==null||row.CJS==0){
         	 	return "-";
         	 } 
         	 return ((row.CJHGS / row.CJS)*100).toFixed(1);
        }
        
         function FJFormatter(value, row, index) {
         	 if(row.FJHGS==null||row.FJS==null||row.FJS==0){
         	 	return "-";
         	 } 
         	 return ((row.FJHGS / row.FJS)*100).toFixed(1);
        }
        
         function DataFormatter(value, row, index) { 
         	if(value==0){
         		return "-";
         	}
         	return value;
        }
         
    </script>
</html>
<!-- 报告上传统计 -->
 
 